// 柱状图
$.ajax({
        url:"sy/cqjc/tubiaoT",
        type:"post",
        dataType:"json",
        success:function (json){
            var jsonarray= $.parseJSON(json);
var myChart = echarts.init(document.getElementById('main'));
var dataAxis =[];
var data = [];


$.each(jsonarray,function(index,item){
    dataAxis.push(item.insect);
    data.push(item.insectNumber);
});


var yMax = 3000;
var dataShadow = [];

for (var i = 0; i < data.length; i++) {
    dataShadow.push(yMax);
}

option = {
    title: {
        text: ' ',
        subtext: ' '
    },
    grid: {
        x: '10%',
        x2: '10%',
        y: '10%',
        y2: '15%'
    },
    xAxis: {
        data: dataAxis,
        axisLabel: {
            inside: true,
            textStyle: {
                color: '#fff'
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        z: 10
    },
    yAxis: {
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            textStyle: {
                color: '#999'
            }
        }
    },
    dataZoom: [
        {
            type: 'inside'
        }
    ],
    series: [
        { // For shadow
            type: 'bar',
            itemStyle: {
                normal: {color: 'rgba(0,0,0,0.05)'}
            },
            barGap:'-100%',
            barCategoryGap:'40%',
            data: dataShadow,
            animation: false
        },
        {
            type: 'bar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#83bff6'},
                            {offset: 0.5, color: '#188df0'},
                            {offset: 1, color: '#188df0'}
                        ]
                    )
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {offset: 0, color: '#2378f7'},
                            {offset: 0.7, color: '#2378f7'},
                            {offset: 1, color: '#83bff6'}
                        ]
                    )
                }
            },
            data: data
        }
    ]
};

// Enable data zoom when user click bar.
var zoomSize = 6;
myChart.on('click', function (params) {
    console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
    myChart.dispatchAction({
        type: 'dataZoom',
        startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
    });
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
        },
    error:function(errorMsg){alert("请求数据失败");}

});

// 散点图


// 基于准备好的dom，初始化echarts实例
$.ajax({
    url:"sy/cqjc/tubiaoB",
    type:"post",
    dataType:"json",
    success:function(json){



        var jsonarray= $.parseJSON(json);
var myChart = echarts.init(document.getElementById('main2'));


var schema = [
    {name: 'date', index: 0, text: '日'},
    {name: 'insect', index: 1, text: '数量(头)'},
    {name: 'density', index: 2, text: '密度(头/亩)'}

];


var itemStyle = {
    normal: {
        opacity: 0.8,
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
};

option = {

    color: [
        '#dd4444', '#fec42c', '#80F1BE'
    ],
    legend: {

        y: '5%',
        data: [],
        textStyle: {
            color: '#fff',
            fontSize: 16
        }
    },
    grid: {
        x: '10%',
        x2: '10%',
        y: '10%',
        y2: '15%'
    },
    tooltip: {
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: function (obj) {
            var value = obj.value;
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + obj.seriesName + ' ' + value[0] + '日：'

                + '</div>'
                + schema[1].text + '：' + value[1] + '<br>'
                + schema[2].text + '：' + value[2] + '<br>';
        }
    },
    xAxis: {
        type: 'value',
        name: '日期',
        nameGap: 16,
        nameTextStyle: {
            color: '#fff',
            fontSize: 14
        },
        max: 31,
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        }
    },
    yAxis: {
        type: 'value',
        name: ' ',
        nameLocation: 'end',
        nameGap: 20,
        nameTextStyle: {
            color: '#fff',
            fontSize: 16
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        },
        splitLine: {
            show: false
        }
    },
    visualMap: [
        {
            right: '0%',
            top: '10%',
            dimension: 2,
            min: 0,
            max: 250,
            itemWidth: 0,
            itemHeight: 120,
            calculable: false,
            precision: 0.1,

            textGap: 30,
            textStyle: {
                color: '#fff'
            },
            inRange: {
                symbolSize: [10, 70]
            },
            outOfRange: {
                symbolSize: [10, 70],
                color: ['rgba(255,255,255,.2)']
            },
            controller: {
                inRange: {
                    color: ['#c23531']
                },
                outOfRange: {
                    color: ['#444']
                }
            }
        },

    ],
    series: []
};


              var jsonName = JSON.parse(jsonarray.name);
             $.each(jsonName,function(index,item){
                 option.legend.data.push(item.insect);
             });

             var jsonName1 = JSON.parse(jsonarray.name);
            $.each(jsonName1,function(index,item){
                var newArray={};
                newArray.name=item.insect;
                newArray.type='scatter';
                newArray.itemStyle=itemStyle;
                newArray.data=[];
                option.series.push(newArray);
            });
            var jsonAll = JSON.parse(jsonarray.all);
            $.each(jsonAll,function(index,item){
                var a=[];
                var b=[];
                for(var i=0;i<option.series.length;i++){
                        if(item.insect==option.series[i].name){
                            b.push(item.oBservationTime);
                            b.push(item.insectNumber);
                            b.push(item.density);
                            a.push(b);
                            option.series[i].data.push(b);
                        }
                }


            });

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
    },
    error:function(errorMsg){alert("请求数据失败");}

});